<template>
  <div class="app-container">
    <avue-crud
      :option="option"
      ref="crud"
      :data="data"
      :table-loading="tableLoading"
      :page.sync="page"
      @on-load="onLoad"
      @current-change="currentChange"
      @search-change="searchChange"
      @search-reset="resetChange"
    >
    </avue-crud>
  </div>
</template>

<script>
import { getAllPushHistory } from '@/api/manager.js'
export default {
  components: {},
  data() {
    return {
      tableLoading: false,
      dataList: {},
      bankOptions: [],
      searchList: {},
      checkLoading: false,
      openCel: false,
      openCell: false,
      celLoading: false,
      /* 分页 */
      page: {
        pageSize: 10,
        pageSizes: [10, 20, 30, 40, 50, 100],
        pagerCount: 5,
        layout: 'total, sizes, prev, pager, next, jumper',
        currentPage: 1,
        total: 0,
        background: false,
      },
      show: false,
      basicinfo: 'first',
      data: [],
      selectionList: [],
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        labelWidth: 100,
        viewBtn: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        selectClearBtn: false,
        searchBtn: true,
        searchSpan: 8,
        searchLabelWidth: '20%',
        searchShowBtn: false,
        selection: false,
        searchMenuSpan: 4,
        menu: false,
        column: [
          {
            label: '企业名称',
            prop: 'qymc',
            display: false,
            search: true,
            width: 230,
          },
          {
            label: '风险类型',
            prop: 'fxdl',
            display: false,
            search: true,
            type: 'select',
            dicData: [],
          },
          {
            label: '风险名称',
            prop: 'yjxl',
            display: false,
          },
          {
            label: '风险等级',
            prop: 'yjdj',
            display: false,
            type: 'select',
            search: true,
            dicData: [],
          },
          {
            label: '推送时间',
            prop: 'yjTime',
            type: 'date',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            display: false,
            search: true,
            searchRange: true,
          },
          {
            label: '风险详情',
            prop: 'yjxq',
            display: false,
            width: 500,
            overHidden: true,
          },
        ],
      },
    }
  },
  created() {
    this.getDict()
    this.getDictTwo()
  },
  methods: {
    async getDictTwo() {
      const dataSQQD = await this.$store.dispatch('asyncApi/getDict', {
        code: 'HXFXDL',
      })
      this.option.column[1].dicData = [
        { value: '', label: '全部' },
        ...dataSQQD,
      ]
    },
    async getDict() {
      const yjdjData = await this.$store.dispatch('asyncApi/getDict', {
        code: 'YJDJ',
      })
      this.option.column[3].dicData = [
        { value: '', label: '全部' },
        ...yjdjData,
      ]
    },
    onLoad(page, params = {}) {
      let searchList = this.searchList
      Object.assign(params, {
        ...searchList,
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      })
      this.tableLoading = true
      getAllPushHistory(params).then((data) => {
        if (data.status) {
          this.tableLoading = false
          this.data = data.data.records
          this.page.total = data.data.total
        }
      })
    },
    /* 清空 */
    resetChange(params) {
      params.yjTime = []
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {}
      this.onLoad()
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done()
      this.page.currentPage = 1
      this.page.pageSize = 10
      if (params.yjTime) {
        params.startTime = params.yjTime[0]
        params.endTime = params.yjTime[1]
      }
      params.yjTime = []
      this.searchList = {
        ...params,
      }
      this.onLoad()
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
.labelClassBox {
  position: relative;
  .labelClass {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: red;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  }
}
.setingBtn {
  position: absolute;
  top: 75px;
  left: 300px;
  color: #409eff;
  font-size: 18px;
  cursor: pointer;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0px;
}
/deep/ .avue-crud__pagination {
  text-align: center;
}
.chart-container {
  display: flex;
  margin-left: 20px;
}
#el-tab-pane {
  font-size: 40px;
  font-weight: bold;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto;
}
.detailtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: #e5e5e5 solid 1px;
}
.detailtable tr {
  width: 100%;
}
.detailtable td {
  padding: 8px 10px;
  text-align: left;
  line-height: 24px;
  font-size: 14px;
  color: #434343;
  border: #e5e5e5 solid 1px;
}
.detailtable td {
  font-weight: normal;
  background-color: #fff;
}
.detailtable td {
  word-break: break-all;
}
/deep/ .row {
  display: flex;
  justify-content: space-between;
}
/deep/ .el-textarea {
  width: 100%;
}
</style>
